<template>
	<view class="page-content">
		<view>
			<u-tabs-swiper active-color="#000000" inactive-color="#999999" :bar-style="{ background: '#FCD610' }" ref="uTabs"
				:list="list" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
		</view>
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" :text="filterParmas.searchValue"
				@handleSearch="handleSearch"></custom-input>
		</view>

		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1">
						<sort-tab sortText="离我最近" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
					<view style="flex: 1">
						<sort-tab sortText="1小时内" @sortChanged="sortTimeChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1; overflow-y: auto" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="clDataList.length === 0 && status === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item, index) in clDataList" :key="index" @click="driverplandetail(item)">
							<car-card :data="item"></car-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1">
						<sort-tab sortText="离我最近" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
					<view style="flex: 1">
						<sort-tab sortText="价格排序" @sortChanged="sortPriceChanged"></sort-tab>
					</view>
					<view style="flex: 1">
						<sort-tab sortText="1小时内" @sortChanged="sortTimeChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1; overflow-y: auto" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="cwDataList.length === 0 && status === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item, index) in cwDataList" :key="index" @click="driverplandetail(item)">
							<plan-card :data="item"></plan-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1">
						<sort-tab sortText="离我最近" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
					<view style="flex: 1">
						<sort-tab sortText="1小时内" @sortChanged="sortTimeChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1; overflow-y: auto" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="sjDataList.length === 0 && status === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item, index) in sjDataList" :key="index" @click="driverplandetail(item)">
							<driver-plan-card :data="item"></driver-plan-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="add-btn"><add-btn :link="linkto"></add-btn></view>
	</view>
</template>

<script>
	import carCard from "components/common/card/car-card.vue";
	import planCard from "components/common/card/plan-class-card.vue";
	import driverPlanCard from "components/common/card/driver-plan-card.vue";
	import customInput from "components/common/custom-input.vue";
	import sortTab from "components/index/cmbz/sort-tab.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import empty from "components/common/empty/empty.vue";
	import petBasi from "../../../api/petBasi.js";
	import utils from "../../../utils/util.js";
	export default {
		data() {
			return {
				list: [{
						name: "附近车辆",
					},
					{
						name: "宠物计划",
					},
					{
						name: "司机计划",
					},
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				status: "loadmore",
				clDataList: [], //附近车辆
				cwDataList: [], //宠物计划
				sjDataList: [], //司机计划
				filterParmas: {
					sortType: "",
					sortFiled: "",
					searchValue: "",
					nowLat: 0,
					nowLng: 0,
					pageNum: 0,
					pageSize: this.$config.pageSize,
				}, //筛选参数
				showrefresh: false,
			};
		},
		watch: {
			swiperCurrent: function(newvalue, oldvalue) {
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.current = newvalue;
				this.filterParmas = {
					...this.filterParmas,
					sortType: "",
					sortFiled: "",
					searchValue: "",
				};
				this.getDataList();
			},
		},
		computed: {
			linkto() {
				switch (this.current) {
					case 0:
						return "/page_index/cwbasi/add-recent-car/add-recent-car";
					case 1:
						return "/page_index/cwbasi/add-pet-plan/add-pet-plan";
					case 2:
						return "/page_index/cwbasi/adddriverplan/adddriverplan";
					default:
						break;
				}
			},
		},
		onShow() {
			this.clDataList = [];
			this.cwDataList = [];
			this.sjDataList = [];
			if (this.filterParmas.nowLat && this.filterParmas.nowLng) {
				this.getDataList();
			} else {
				utils
					.getLocationInfo()
					.then((res) => {
						this.filterParmas.nowLat = res.latitude;
						this.filterParmas.nowLng = res.longitude;
						this.getDataList();
					})
					.catch((err) => {
						this.getDataList();
					});
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === "loadmore") this.getDataList();
			},
			sortPriceChanged(value) {
				this.filterParmas.sortType = value;
				this.filterParmas.sortFiled = "price";
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			sortTimeChanged(value) {
				this.filterParmas.sortType = value;
				this.filterParmas.sortFiled = "createTime";
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			sortDistanceChanged(value) {
				this.filterParmas.sortType = value;
				this.filterParmas.sortFiled = "distance";
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			driverplandetail(item) {
				switch (this.current) {
					case 0:
						uni.navigateTo({
							url: `/page_index/cwbasi/recent-car-detail/recent-car-detail?id=${item.id}&distance=${item.distance}`,
						});
						break;
					case 1:
						uni.navigateTo({
							url: `/page_index/cwbasi/congwu-plan-detail/congwu-plan-detail?id=${item.id}&distance=${item.distance}`,
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/page_index/cwbasi/driver-plan-detail/driver-plan-detail?id=${item.id}&distance=${item.distance}`,
						});
						break;
					default:
						break;
				}
			},
			handleSearch(val) {
				this.filterParmas.searchValue = val;
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			handlerefresh() {
				this.showrefresh = true;
				this.clDataList = [];
				this.cwDataList = [];
				this.sjDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			getDataList() {
				if (this.status !== "loading") {
					this.status = "loading";
					this.filterParmas.pageNum++;
					if (this.current === 0) {
						petBasi
							.getVehiclesList(this.filterParmas)
							.then((res) => {
								if (res.code === 200) {
									this.showrefresh = false;
									this.clDataList.push(...res.rows);
									if (res.rows?.length < this.$config.pageSize)
										this.status = "nomore";
									else {
										this.status = "loadmore";
									}
								} else {
									throw Error();
								}
							})
							.catch((err) => {
								this.showrefresh = false;
								this.status = "nomore";
								console.log(err);
							});
					} else if (this.current === 1) {
						petBasi
							.getPetPlanList(this.filterParmas)
							.then((res) => {
								if (res.code === 200) {
									this.showrefresh = false;
									this.cwDataList.push(...res.rows);
									if (res.rows?.length < this.$config.pageSize)
										this.status = "nomore";
									else {
										this.status = "loadmore";
									}
								} else {
									throw Error();
								}
							})
							.catch((err) => {
								this.showrefresh = false;
								this.status = "nomore";
								console.log(err);
							});
					} else if (this.current === 2) {
						petBasi
							.getDriverPlanList(this.filterParmas)
							.then((res) => {
								if (res.code === 200) {
									this.showrefresh = false;
									this.sjDataList.push(...res.rows);
									if (res.rows?.length < this.$config.pageSize)
										this.status = "nomore";
									else {
										this.status = "loadmore";
									}
								} else {
									throw Error();
								}
							})
							.catch((err) => {
								this.showrefresh = false;
								this.status = "nomore";
								console.log(err);
							});
					}
				}
			},
		},
		components: {
			carCard,
			planCard,
			driverPlanCard,
			customInput,
			sortTab,
			addBtn,
			empty,
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #f6f6f6;

		display: flex;
		flex-direction: column;

		.search-box {
			padding: 16rpx 32rpx 24rpx 32rpx;
		}

		.sort-box {
			display: flex;
			justify-content: cneter;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.swiper-box {
			flex: 1;

			.swiper-item {
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				.cards {
					margin-bottom: 32rpx;

					// &:first-child {
					// 	margin-top: 0;
					// }
				}
			}
		}

		.add-btn {
			position: absolute;
			bottom: 218rpx;
			right: 32rpx;
		}
	}
</style>